<template>
  <div>
    <div class="table-page-search-wrapper">
      <!-- 搜索区域 -->
      <a-form-model
        ref="formModel"
        :model="form"
        layout="inline"
        :rules="{
          name: [
            {
              validator: validators.noWhitespace(),
              trigger: 'change'
            },
            {
              validator: validators.noIllegalString(),
              trigger: 'change'
            },
            {
              max: 10,
              message: '长度在 1 到 10 个字符',
              trigger: 'change'
            },
          ]
        }"
      >
        <a-row
          type="flex"
          justify="end"
        >
          <a-col
            :md="6"
            :sm="8"
          >
            <a-form-model-item
              prop="name"
              label="应用名称"
            >
              <a-input
                autocomplete="off"
                v-model="form.name"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <span
            style="float: left; overflow: hidden"
            class="table-page-search-submitButtons"
          >
            <a-col
              :md="12"
              :sm="24"
            >
              <a-button
                type="primary"
                @click="loadData(true)"
                icon="search"
                style="margin-left: 21px"
              >查询</a-button>
              <a-button
                @click="resetSearchForm"
                icon="reload"
                style="margin-left: 8px"
              >重置</a-button>
            </a-col>
          </span>
        </a-row>
      </a-form-model>
    </div>
    <a-table
      ref="table"
      rowKey="id"
      size="middle"
      :columns="columns"
      :dataSource="gDataSource"
      :pagination="gPagination"
      @change="gHandleTableChange"
    >
      <span
        slot="sortCol"
        slot-scope="text, record, index"
      >
        {{
          (gPagination.current - 1) * gPagination.pageSize + parseInt(index) + 1
        }}
      </span>
      <span slot="instance" slot-scope="text, record">
        <template v-if="record.cloudResourceTypeName === '容器云'">
          <a-icon type="cloud" />
        </template>
        <template v-else>
          <a-icon type="desktop" />
        </template>
        {{ text }}
      </span>
      <span slot="cloudType" slot-scope="text, record" style="vertical-align: middle;">
        <template v-if="record.cloudResourceTypeName === '容器云'">
          <img src="~@/assets/k8s_logo.svg" alt="logo" style="width: 18px">
        </template>
        <template v-else-if="record.cloudResourceTypeName === '华为云'">
          <img src="~@/assets/huawei_logo.png" alt="logo" style="width: 18px">
        </template>
        <template v-else>
          <img src="~@/assets/aliyun_logo.png" alt="logo" style="width: 18px">
        </template>
        {{ text }}
      </span>
      <span slot="result" slot-scope="text, record">
        <template v-if="record.statusName === '成功'">
          <a-icon type="check-circle" style="color: #15ed15;font-size: 18px;" />
        </template>
        <template v-else-if="record.statusName === '进行中' || record.statusName === '准备'">
          <a-spin />
        </template>
        <template v-else>
          <a-icon type="close-circle" style="color: red;font-size: 18px;" />
        </template>
      </span>
    </a-table>
  </div>
</template>

<script>
  import { GwListMixin } from "@/mixins/GwListMixin";
  import { gPostAction } from "@/api/manage";

  export default {
    name: "SchedulerLog",
    mixins: [GwListMixin],
    data() {
      return {
        // 表头
        columns: [
        {
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          scopedSlots: { customRender: "sortCol" },
        },
        {
          title: "应用名称",
          dataIndex: "appName",
        },
        {
          title: "调度实例",
          dataIndex: "instanceName",
          scopedSlots: { customRender: "instance" },
        },
        {
          title: '云平台资源',
          dataIndex: 'cloudResourceName',
        },
        {
          title: "调度类型",
          dataIndex: "cloudResourceTypeName",
          scopedSlots: { customRender: "cloudType" },
        },
        {
          title: "原数据中心",
          dataIndex: "srcDatacenterName",
        },
        {
          title: "目标数据中心",
          dataIndex: "dstDatacenterName",
        },
        {
          title: '调度结果',
          align: "center",
          dataIndex: "statusName",
          scopedSlots: { customRender: "result" },
        },
        {
          title: "结束时间",
          dataIndex: "beginTime",
        }, ],
        gDataSource: [],
        url: {
          list: "/scheduler/job/page",
        },
        form: {
          name: '',
        },
        timer: "",
      };
    },
    mounted() {
      this.loadData();
    },
    beforeDestroy() {
      if (this.timer) {
        clearInterval(this.timer);
      }
    },
    methods: {
      loadData(isDoSearch) {
        this.$refs.formModel.validate(error => {
          if (!error) { return }
          this.gQueryParam.name = this.form.name
          this.gQueryParam.title = "多数据中心调度-动态调度机制-调度结果审计-调度日志记录";
          this.gQueryParam.content = "查询调度日志记录列表"
          if (isDoSearch) {
            this.gQueryParam.pageNo = 1
            this.gPagination.current = 1
          }
          gPostAction(this.url.list, this.gQueryParam).then((res) => {
            if (res.success) {
              let doTimer = false;
              if (this.timer) {
                clearInterval(this.timer);
              }
              this.gDataSource = res.data.list
              this.gPagination.total = res.data.totalCount
              this.gDataSource.forEach((d) => {
                if (d.statusName === "进行中" || d.statusName === "准备") {
                  doTimer = true;
                }
              });
              if (doTimer) {
                this.timer = setInterval(this.loadData, 5000);
              }
            }
          })
        })
      },
      handleDetail(data) {
        this.$refs.detailModal.showModal();
      },
      handleConfig(data) {
        this.$refs.configModal.config(data);
      },
      resetSearchForm() {
        this.form.name = ""
        this.$refs.formModel.resetFields()
      },
    },
  };
</script>
